<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <div class="form-group-file" style="margin-top:20px;">
        <span class="form-label-file">规划名称:</span>
        <span>{{title}}</span>
      </div>
      <el-form
        label-width="130px"
        :model="projectForm"
        style="padding-right: 30px;"
        :rules="addPlanConnectionrules"
        ref="projectForm"
      >
        <el-row>
          <el-col :span="22" style="margin-top: 27px">
            <el-form-item class="form-item-release" label="衔接主题 :" prop="title">
              <el-input
                placeholder="请输入衔接主题"
                v-model="projectForm.title"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
              <el-form-item class="form-item-release" label="衔接部门 :" prop="supportDeptName">
                {{projectForm.supportDeptName}}
                <el-input v-model="projectForm.supportDeptName" placeholder="请输入衔接部门" style="display: none"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-button size="small" type="primary" icon="el-icon-plus" style="margin-left: 10px;" @click="clickLevyDept">衔接部门</el-button>
            </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item class="form-item-release" label="衔接说明 :" prop="content">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4}"
                placeholder="请输入衔接说明"
                v-model="projectForm.content"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item class="form-item-release" label="衔接请示件 :" >
            <el-upload
              class="upload-demo"
              ref="uploadrelated"
              action="string"
              :http-request="submitUploadMixin"
              :on-preview="handlePreviewMixin"
              :on-remove="handleRemoveMixin"
              :file-list="fileListMixin"
              :auto-upload="true"
              :on-change="fileChangeMixin">
              <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      </el-form>
      <div class="form-submit">
        <el-button type="primary" :disabled="isDisabled" @click.stop="commitList()">提交</el-button  >
        <el-button type="info" @click.stop="goBack()">关闭</el-button>
      </div>
      <dept-check :visible="deptVisible" mini-type="2" @getCheckInfo="getCheckInfo" @cancel="cancelSupportDept"></dept-check>
    </div>
  </basic-container>
</template>

<script>
  import {addPlanConnectionrules} from "@/const/infoRules";
  import {addPlanConnection} from "@/api/make";
  import {PROJECT_DIC} from '@/const/dict';
  import { resultList } from "@/api/planning/result";
  import { getAreaByType } from "@/api/system";
  import relatedfile from "@/mixins/relatedfile";
  export default {
    name: "addPlanConnection",
    mixins:[relatedfile],
    created(){
      this.projectForm.collectionRange = '1';
      this.projectForm.achievementId = this.$route.params.id;
      this.projectForm.title = this.$route.query.orgName + '关于提请对《' + this.$route.query.title + '》进行衔接的函';
      this.title = this.$route.query.title
    },
    data(){
      return{
        headerData:{
          title:'发起衔接'
        },
        addPlanConnectionrules:addPlanConnectionrules,// 表单验证
        projectForm: {
          achievementId:0,
          supportDeptName:'',
          content:'',
          title:'',
        },
        title:'',
        deptVisible:false,//协同部门树弹窗标志
        singletableLoading:false,
        singleresultListData: [],
        dialogFormVisible:false,
        state:'0',//状态
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        tableLoading:false,
        resultListData: [],
        arealisttemp: [],
        arealisttempdistrict:[],
        choosedPlanning:'',
        choosedPlanningTemp:'',
        // 立项依据
        basisContent: '',
        basisOption:{
          // something config
          modules:{
            toolbar:null
          },
          placeholder:'请输入立项依据'
        },
        dialogVisible:false,
        isDisabled: false,
      }
    },
    methods:{
      // 弹出征集部门弹框
      clickLevyDept(){
        this.deptVisible = true
      },
      cancelSupportDept(deptIds, deptNames) {
        this.deptVisible = false;
      },
      getCheckInfo(deptIds, deptNames) {
        this.projectForm.supportDeptName = deptNames;
        this.projectForm.deptIds = deptIds.split(",");
        this.deptVisible = false;
      },
      goBack(){
        this.$router.go(-1);
      },
      commitList(){
        if(this.projectForm.supportDeptName == ''){
          this.$notify({
            title: "提醒",
            type: "warning",
            message: "请选择衔接部门",
            duration: 2000
          });
          return;
        }

        this.$refs.projectForm.validate(valid => {
          if (valid) {
            this.$confirm("确定发起衔接吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              //将多个相关材料的附件id拼成逗号隔开的字符串放在 this.projectForm.fileId 中
              var arr=[];
              for(var item in this.fileListMixin){
                arr.push(this.fileListMixin[item].url);
              }
              this.projectForm.fileIds = arr;
              this.isDisabled = true;
              addPlanConnection(this.projectForm).then(response => {
                if (response.data.code == 0) {
                  this.$notify({
                    title: "成功",
                    message: "发起成功",
                    type: "success",
                    duration: 2000
                  });
                  this.$router.go(-1);
                }
              })
            });
            this.isDisabled = false;
          }else{
            this.isDisabled = false;
          }
        })
      },
      choosePlanning(){
        this.dialogFormVisible = true;
      },
      cancelPlanning(){
        this.dialogFormVisible = false;
      },
      refreshChange(){
        this.getResultList(this.page)
      },
      // 搜索
      searchChange(params){
        this.page.currentPage = 1
        this.getResultList(this.page,this.dealSearchParam(params))
      },
      handleChange(form) {},
    },
  }
</script>

<style lang="scss" scoped>

</style>


